<script setup lang='ts'>
import myHeaderMete from "@/components/pc/myHeaderMete.vue";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { userSepmt } from "@/api/api";
const route = useRoute()
const router = useRouter()
const title = ref()
const title2 = ref()
const id = ref()
const data = ref()
const mydataisfo = ref()
onMounted(async () => {
    id.value = route.query.id
    title.value = route.query.title
    title2.value = route.query.title2
    const mail = localStorage.getItem('mail') as string
    const res = await userSepmt({ mail })
    data.value = res.data.data
    if (data.value.length === 0) return mydataisfo.value = true
    mydataisfo.value = false
})
const goBack = () => {
    router.back()
}
const useRouterThisData = (e: { _id: string }) => {
    router.push({ name: 'thisData', query: { id: e._id,title:'我的发布' } })
}
</script>

<template>
    <div class="back">
        <el-page-header title="返回" @back="goBack">
            <template #content>
                <span class="text-large font-600 mr-3"> 我的发布 </span>
            </template>
        </el-page-header>
        <img class="logo" src="../../../public/vite.svg" alt="">
    </div>
    <div class="color">
        <myHeaderMete :title :id :title2 title3="我的发布" />
        <div class="content">
            <el-empty v-if="mydataisfo" style="width: 100%;height: 800px;" description="暂没数据" />
            <div class="data" v-for="i in data" @click="useRouterThisData(i)">
                <div class="titleAndText">
                    <div style="color: #0b73bb;">{{ i.title }}</div>
                    <p class="text1">{{ i.text }}</p>
                    <div style="color: #999; font-size: 12px;"> 完成周期：服务商报时</div>
                </div>
                <div class="moneyAndUser">
                    <div class="money">
                        金额：<span style="color: red;">￥{{ i.money }}</span>
                    </div>
                    <div class="userup">发布人：{{ i.userName }}</div>
                </div>
                <div class="btn">
                    <el-tag type="success" style="margin-left: 20px;">请查看是否有投手接单和添加您微信</el-tag>
                </div>
            </div>
        </div>
        <div class="s"></div>
    </div>
</template>

<style scoped>
.back {
    width: 1300px;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e3de;
}

.logo {
    width: 50px;
}

.color {
    width: 100%;
    background-color: #f5f5f5;
}

.s {
    height: 20px;
}

.content {
    width: 1300px;
    min-height: 800px;
    margin: auto;
}

.data {
    width: 100%;
    height: 100px;
    background-color: white;
    display: grid;
    grid-template-columns: 60% 20% 20%;
    box-sizing: border-box;
    padding: 20px;
    margin-top: 10px;
}

.data:hover {
    box-shadow: 0 0 10px 0 rgba(111, 111, 111, .3);
}

.titleAndText {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(1, 1fr);
}

.moneyAndUser {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text1 {
    width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.moneyAndUser {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.money {
    box-sizing: border-box;
    padding: 5px;
    height: 50%;
    border-radius: 3px;
    font-size: 15px;
    display: inline-block;
    color: #ff4800;
    border: 1px solid #fbd4c3;
    background: #fffbfa;
    display: flex;
    justify-content: center;
    align-items: center;
}

.userup {
    text-align: center;
    color: #999;
    font-size: 14px;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.circleBtn {
    margin-left: 20px;
}

.user {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
}
</style>